<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>

	<title>车辆轨迹</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>


<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(89.177995, 44.939548);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

    $.get('mapdata.js', function (rs) {

		var geoCoords = JSON.parse(rs);

		var pois = [];

        for (var i = 0; i < geoCoords.length; i++) {
            var point = new BMap.Point(geoCoords[i].geoCoord[0], geoCoords[i].geoCoord[1]);
			pois.push(point);
		}

		var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
			scale: 0.6,//图标缩放大小
			strokeColor:'#fff',//设置矢量图标的线填充颜色
			strokeWeight: '2',//设置线宽
		});
		var icons = new BMap.IconSequence(sy, '10', '30');

		var polyline =new BMap.Polyline(pois, {
			enableEditing: false,//是否启用线编辑，默认为false
			enableClicking: true,//是否响应点击事件，默认为true
			icons:[icons],
			strokeWeight:'8',//折线的宽度，以像素为单位
			strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
			strokeColor:"#18a45b" //折线颜色
		});

		map.addOverlay(polyline);          //增加折线

		map.setViewport([polyline.getBounds().getSouthWest(), polyline.getBounds().getNorthEast()]); 
    });

</script>


